<template>
    <div class="find-page">
        <!-- 导航栏 -->
        <view class="navigation-bar">
            <text class="navigation-bar-title">发现</text>
        </view>

        <!-- 选项卡 -->
        <view class="tab">
            <view
                class="tab-item"
                :class="{ active: active === index }"
                v-for="(item, index) in tabs"
                :key="index"
                @click="handleTabClick(index)"
            >
                {{ item.name }}
            </view>
            <!-- 更多图标 -->
            <view class="icon" :style="{ backgroundImage: `url(${moreIcon})` }"></view>
        </view>

        <!-- 内容区域 -->
        <scroll-view class="view-box" scroll-y @scrolltolower="onReachBottom">
            <view class="view" v-for="(view, index) in views" :key="index">
                <view class="img" @click="goToDetail(view)">
                    <text class="title">{{ view.title }}</text>
                    <image :src="view.imgUrl" mode="cover" class="img-item"></image>
                </view>
            </view>
            <!-- 加载更多提示 -->
            <view v-if="loadingMore" class="loading-more">
                <text>加载中...</text>
            </view>
        </scroll-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            active: 0, // 当前选中的选项卡索引
            tabs: [
                { name: '热门' },
                { name: '周边' },
                { name: '收藏' },
                { name: '短视频' }
            ],
            views: [
                { 
                    title: '晚霞下的古河湖',
					imgUrl: require('../../static/images/view1.png'),
                    imgUrls: [ 
                          require('../../static/images/view1.png'),
                          require('../../static/images/guhehu1.png'),
                          require('../../static/images/guhehu2.png')
                        ],
                    description: '晚霞下的古河湖景色十分迷人，湖水在夕阳的映照下波光粼粼，周边的古树林立，仿佛带您穿越回古代。这里是摄影爱好者的天堂，也是放松身心的好去处。',
                    openTime: '08:00 - 18:00',
                    ticketPrice: '免费',
                    transportation: '可乘坐公交X路到古河湖站下车',
                    location: '云南省丽江市',
                    rating: 4.8,
                    recommendedTime: '建议游玩3-4小时',
                    introduction: '古河湖是一处有着千年历史的自然景观，湖水清澈见底，周围群山环抱，形成了独特的自然生态系统。这里四季分明，每个季节都有不同的美景，尤其是在晚霞时分，整个湖面被染成金黄色，美不胜收。'
                },
                { 
                    title: '金沙江大拐弯', 
                    imgUrl: require('../../static/images/view2.png'),
					imgUrls: [
					      require('../../static/images/view2.png'),
					      require('../../static/images/jinshajiang1.png'),
					      require('../../static/images/jinshajiang2.png')
					    ],
                    description: '金沙江大拐弯是大自然的鬼斧神工之作，江水在这里形成了一个巨大的拐弯，气势磅礴。站在观景台上，您可以俯瞰整个大拐弯的壮丽景色，感受大自然的震撼。',
                    openTime: '全天开放',
                    ticketPrice: '50元/人',
                    transportation: '可自驾前往，导航至金沙江大拐弯观景台',
                    location: '云南省迪庆州',
                    rating: 4.9,
                    recommendedTime: '建议游玩2-3小时',
                    introduction: '金沙江大拐弯又称"长江第一湾"，是长江上游的一个重要地理标志。这里的江水湍急，河道曲折，形成了一个近乎180度的大拐弯，被誉为"天下奇观"。站在观景台上，可以看到江水奔腾不息，感受大自然的磅礴力量。'
                },
                { 
                    title: '最美在普者黑', 
                    imgUrl: require('../../static/images/view3.png'),
					imgUrls: [ 
                          require('../../static/images/view3.png'),
                          require('../../static/images/puzhehei1.png'),
                          require('../../static/images/puzhehei2.png')
                        ],
                    description: '普者黑以其独特的喀斯特地貌和清澈的湖水而闻名。这里有大片的荷花池，夏季时荷花盛开，美不胜收。您可以乘船游览湖泊，欣赏周边的山水风光，体验田园生活的宁静与美好。',
                    openTime: '07:30 - 17:30',
                    ticketPrice: '根据不同景点套餐收费',
                    transportation: '可乘坐高铁到普者黑站，再转乘当地公交或打车前往景区',
                    location: '云南省文山州',
                    rating: 4.7,
                    recommendedTime: '建议游玩1-2天',
                    introduction: '普者黑是一处典型的喀斯特地貌景区，以"水上田园、湖泊峰林、彝家水乡、岩溶湿地、荷花世界、候鸟天堂"六大景观而闻名。这里的湖水清澈见底，周围群山环抱，形成了独特的自然景观。夏季时，大片的荷花盛开，吸引了众多游客前来观赏。'
                }
            ],
            moreIcon: require('../../static/images/more.png'), // 更多图标路径
            loadingMore: false // 加载更多状态
        };
    },

    methods: {
        handleTabClick(index) {
            this.active = index;
            // 可在此处添加切换选项卡的逻辑
            console.log('切换至选项卡', index);
        },
        onReachBottom() {
            // 上拉加载更多逻辑
            if (!this.loadingMore) {
                this.loadingMore = true;
                // 模拟加载数据
                setTimeout(() => {
                    this.views.push({
                        title: '新景点',
                        imgUrl: require('../../static/images/view1.png')
                    });
                    this.loadingMore = false;
                }, 1500);
            }
        },
        onPullDownRefresh() {
            // 下拉刷新逻辑
            setTimeout(() => {
                // 模拟刷新数据
                this.views = [
                    { 
                        title: '晚霞下的古河湖', 
                        imgUrl: require('../../static/images/view1.png'),
                        description: '晚霞下的古河湖景色十分迷人，湖水在夕阳的映照下波光粼粼，周边的古树林立，仿佛带您穿越回古代。这里是摄影爱好者的天堂，也是放松身心的好去处。'
                    },
                    { 
                        title: '金沙江大拐弯', 
                        imgUrl: require('../../static/images/view2.png'),
                        description: '金沙江大拐弯是大自然的鬼斧神工之作，江水在这里形成了一个巨大的拐弯，气势磅礴。站在观景台上，您可以俯瞰整个大拐弯的壮丽景色，感受大自然的震撼。'
                    },
                    { 
                        title: '最美在普者黑', 
                        imgUrl: require('../../static/images/view3.png'),
                        description: '普者黑以其独特的喀斯特地貌和清澈的湖水而闻名。这里有大片的荷花池，夏季时荷花盛开，美不胜收。您可以乘船游览湖泊，欣赏周边的山水风光，体验田园生活的宁静与美好。'
                    }
                ];
                uni.stopPullDownRefresh();
            }, 1500);
        },
        goToDetail(view) {
          // 确保传递完整数据
          uni.navigateTo({
            url: `/pages/detail/detail?detail=${encodeURIComponent(JSON.stringify(view))}`
          });
        }
    },
    onReady() {
        uni.startPullDownRefresh(); // 页面加载完成后自动刷新一次
    },
    onPullDownRefresh() {
        this.onPullDownRefresh();
    }
};
</script>

<style scoped>
/* 导航栏样式 */
.navigation-bar {
    background-color: #98d361;
    color: white;
    text-align: center;
    padding: 20rpx;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navigation-bar-title {
    font-size: 36rpx;
    font-weight: bold;
}

/* 选项卡样式 */
.tab {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 24rpx;
    background: #98d361;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tab-item {
    width: 124rpx;
    height: 48rpx;
    text-align: center;
    line-height: 48rpx;
    background: #addc81;
    color: #eeeeee;
    font-size: 22rpx;
    border-radius: 80rpx;
    transition: all 0.3s ease;
}

.tab-item.active {
    background: #fff;
    color: #98d361;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.icon {
    width: 24rpx;
    height: 24rpx;
    background-repeat: no-repeat;
    background-size: contain;
}

/* 内容区域样式 */
.view-box {
    width: 100%;
    padding: 20rpx;
}

.view {
    margin-bottom: 20rpx;
    border-radius: 10rpx;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.view:hover {
    transform: translateY(-5rpx);
}

.img {
    position: relative;
    width: 100%;
    height: 356rpx;
}

.img-item {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10rpx;
    text-align: center;
    font-size: 30rpx;
    color: #eeeeee;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.75);
}

.loading-more {
    text-align: center;
    padding: 20rpx;
    color: #999;
}
</style>